<template>
	<view>
		<!-- 导航 -->
		<view class="nav" :class="scrollTop>250?'position':''">
			<scroll-view scroll-x="true" show-scrollbar='false' class="scroll">
				<view class="list margin-20">
					<view class="item" @click="clickItem(item)" :class="active==item.value?'active':''"
						v-for="(item,index) in listNew" :key="">
						<view class="text">{{item.label}}</view>
						<view class="row" v-if="active==item.value?'active':''">
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="iconfont icon-xiala- some" @click="Open">
			</view>
		</view>
		<!-- 弹框 -->
		<uni-popup ref="popup" type='top' @change="ChangePop">
			<view class="popup">
				<view class="poTop">
					<view class="">
						默认分类
					</view>
					<view class="" style="display: flex;align-items: center;">
						<text @click="over">完成</text>
						<text @click="close" class="iconfont icon-chahao del"></text>
					</view>
				</view>
				<view class="popList">
					<view class="popItem popItemBg" @click="clickItem(item)" @longpress="logoTime"
						v-for="(item,index) in list" :key="index">
						<text :class="item.value==active?'Popacive':''">{{item.label}}</text>
						<text v-if="logoTimeActive" @click.stop="popDel(item,index)"
							class="iconfont icon-chahao popDel"></text>
					</view>
				</view>
				<view class="poTop">
					<view class="">
						分类推荐
						<text class="text">点击添加分类</text>
					</view>

				</view>
				<view class="popList">
					<view @click="popAdd(item,index)" class="popItem popItemBor" v-for="(item,index) in listOld"
						:key="index">
						<text class="iconfont icon-tianjia popAdd"></text>
						<text>{{item.label}}</text>

					</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: ['scrollTop', 'Navlist', 'NavlistOld', 'HidePop'],
		data() {
			return {
				active: '国际物流',
				logoTimeActive: false,
				list: [],
				listNew: [],
				listOld: []

			}
		},
		onLoad() {

		},
		mounted() {
			this.list = JSON.parse(JSON.stringify(this.Navlist))
			this.listNew = JSON.parse(JSON.stringify(this.Navlist))
			this.listOld = JSON.parse(JSON.stringify(this.NavlistOld))
			// this.$refs.popup.open();
		},
		watch: {
			scrollTop(newVal, oldVal) {
				console.log('新数据',
					newVal)
				console.log('旧数据', oldVal)
			},
			HidePop(newVal, oldVal) {
				if (this.HidePop) {
					this.$refs.popup.close();
				}
				console.log('新数据',
					newVal)
				console.log('旧数据', oldVal)
			},
		},
		beforeUpdate() {},
		methods: {
			// 点击当个分类
			clickItem(e) {
				this.active = e.value;
				this.$emit('click', {
					active: this.active,
					listNew: this.listNew
				})
			},
			// 关闭
			ChangePop(e){
				if(!e.show){
					this.logoTimeActive = false;
				}
			},
			over() {
				this.$refs.popup.close();
				// 点击完成赋值
				var list = JSON.parse(JSON.stringify(this.list))
				this.listNew = list;
				this.$emit('click', {
					active: this.active,
					listNew: this.listNew
				})
			},
			close() {
				this.$refs.popup.close();
				this.$emit('click', {
					active: this.active,
					listNew: this.listNew
				})
			},
			// 打开弹框
			Open() {
				this.$refs.popup.open();
				this.list = JSON.parse(JSON.stringify(this.Navlist));
			},
			// 长按默认分类
			logoTime() {
				this.logoTimeActive = true;
			},
			//默认分类删除
			popDel(item, index) {
				this.listOld.push(item)
				this.list.splice(index, 1)
			},
			// 添加类型
			popAdd(item, index) {
				this.list.push(item)
				this.listOld.splice(index, 1)
			},
			
		}
	}
</script>

<style lang="less">
	// 导航
	.nav {
		border-bottom: 1px solid #E0E0E0;
		display: flex;
		align-items: center;
		width: 100%;


		.some {
			color: rgba(153, 153, 153, 1);
			font-size: 30rpx;
			margin-left: 20rpx;
		}
	}

	.position {
		position: fixed;
		z-index: 999;
		top: 0;
		background-color: #fff;
		border-top: 1px solid #E0E0E0;
	}

	.scroll {
		white-space: nowrap;
		width: 90%;

		.list {
			display: flex;
			// padding: 0 20rpx;

			.item {
				color: rgba(51, 51, 51, 0.5);
				font-size: 30rpx;
				padding-right: 40rpx;

				.text {
					padding: 15rpx 0;
				}

				.row {
					width: 60rpx;
					height: 6rpx;
					opacity: 1;
					border-radius: 4rpx;
					background: rgba(212, 48, 48, 1);
				}
			}

			.active {
				color: rgba(51, 51, 51, 1);
			}
		}

	}

	// 弹框
	.popup {
		background-color: #fff;
		border-top: 1px solid rgba(224, 224, 224, 1);

		.poTop {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			font-size: 28rpx;
			color: rgba(65, 79, 96, 0.5);

			.del {
				font-size: 30rpx;
				padding-left: 30rpx;
			}

			.text {
				font-size: 24rpx;
				color: rgba(136, 136, 136, 0.5);
				padding-left: 20rpx;
			}
		}

		.popList {
			display: flex;
			flex-wrap: wrap;
			color: rgba(51, 51, 51, 1);
			font-size: 26rpx;
			margin-left: 20rpx;

			.popItemBg {
				background: rgba(245, 245, 245, 1);
				margin-bottom: 20rpx;
				padding: 10rpx 25rpx;
				margin-right: 20rpx;
			}

			.popItemBor {
				border: 0.5px dashed rgba(224, 224, 224, 1);
				margin-bottom: 20rpx;
				padding: 10rpx 6rpx;
				margin-right: 20rpx;
			}


			.popItem {
				border-radius: 2px;

				border-radius: 10rpx;

				.Popacive {
					color: rgba(212, 48, 48, 1);
				}

				.popDel {
					position: absolute;
					width: 12px;
					height: 12px;
					opacity: 1;
					background: rgba(153, 153, 153, 1);
					border-radius: 50%;
					font-size: 9px;
					color: #fff;
					text-align: center;
					margin-top: -20rpx;
					line-height: 12px;
				}

				.popAdd {
					font-size: 26rpx;
					padding-right: 10rpx;
				}

			}
		}

	}
</style>